<template>
  <van-popup v-model:show="showComment" duration=".2" :style="{ height: '100%', width: '100%', background: '#f7f7f7' }">
    <van-nav-bar :title="`评论(${total})`" fixed placeholder left-arrow @click-left="showComment = false;" />
    <div class="common-btn">
      <!-- <div class="arrow fixed">
        <van-icon name="arrow-left" />
      </div> -->
      <div class="to-top fixed">
        <van-icon name="arrow-up" />
      </div>
    </div>
    <!-- 歌曲信息 -->
    <div class="music-info wrap">
      <van-image class="avatar" round :src="nowPlay.album.picUrl" />
      <p>{{ nowPlay.musicName }}<span class="font-fu"> - {{ nowPlay.artists[0].name }}</span></p>
    </div>

    <!-- 评论信息 -->
    <van-list v-model:loading="listLoading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="comments wrap">
        <div class="comments-list" v-for="item in comments" :key="item.commentId">
          <!-- 发布人信息 -->
          <div class="user-info">
            <van-image class="avatar" round :src="item.user.avatarUrl" fit="cover" />
            <div class="user">
              <p>{{ item.user.nickname }}</p>
              <span class="font-fu">{{ item.timeStr }}</span>
            </div>
          </div>

          <div class="content">
            {{ item.content }}
            <van-divider />
          </div>
        </div>
      </div>
    </van-list>

  </van-popup>
</template>

<script setup>
import { reactive, toRefs, ref, onMounted, onUpdated } from 'vue'
import { storeToRefs } from 'pinia'
import { PlayStore } from '@/store/playlist/index'
import { getMusicComment } from '@/request/api/musicApi.js'
const playStore = PlayStore();
let { nowPlay } = storeToRefs(playStore)


let showComment = ref(false);


onMounted(() => {
  initData()
})

let comments = ref([]);
const initData = () => {
  getComment();
}


// 获取歌曲评论

let total = ref(0);
let listLoading = ref(false);
let finished = ref(false);

const getComment = async (page = 1, limit = 20, isLoad = false) => {
  //除了下拉加载的时候  其他请求都重置
  if (!isLoad) comments.value = [];
  let musicId = nowPlay.value.musicId;
  let data = {
    id: musicId,
    limit,
    offset: page * limit
  }
  await getMusicComment(data).then(data => {
    const newList = data.comments;
    listLoading.value = false;
    comments.value = [...comments.value, ...newList];
    total.value = data.total;
    // 所有数据加载完毕
    if (comments.value.length >= data.value) {
      finished.value = true;
    }
  })
}

// 加载更多
let page = 0;
const onLoad = () => {
  getComment(page++, 20, true);
}



defineExpose({
  showComment,
  getComment
})
</script>
  
<style lang='less' scoped>
.common-btn {
  .fixed {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 10;
    width: 70px;
    height: 70px;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 50%;
    color: #FFF;
  }

  .arrow {
    top:20px;
    left: 20px;
  }
  .to-top{
    right: 10px;
    bottom: 20px;
  }
}

.wrap {
  background-color: #FFF;
  padding: 20px;
  box-sizing: border-box;
}

.music-info {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;

  .avatar {
    width: 100px;
  }

  p {
    margin-left: 20px;
    font-size: 36px;

    span {
      font-size: 30px;
    }
  }
}

.comments {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;

  .comments-list {
    width: 100%;

    .avatar {
      width: 80px;
    }

    .user-info {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;

      .user {
        margin-left: 20px;
        font-size: 36px;

        span {
          font-size: 28px;
        }
      }
    }
  }

  .content {
    margin-left: 100px;
    font-size: 30px;
    margin-top: 10px;
  }
}
</style>